<template>
	<view class="wrap">
		<up-sticky>
			<view class="wrap-navigation"
				:style="{height:(systemBarInfo.statusBarHeight + systemBarInfo.height + 10) + 'px'}">
				<view class="wrap-navigation-content align-center"
					:style="{lineHeight:systemBarInfo.height+'px',paddingTop:systemBarInfo.top+'px'}">
					<view class="back" @click="hanldeBack"></view>
					<view class="filter-content align-center">
						<up-input :style="{width:(systemBarInfo.left-61)+'px',height:'62rpx',border:'none',backgroundColor: '#F1F1F1',paddingLeft:'40rpx',boxSizing:'border-box'}" :focus="true" placeholder="请输入昵称或姓名" shape="circle">
							<template #suffix>
								<view class="suffix-content">
									搜索
								</view>
							</template>
						</up-input>
					</view>
				</view>
			</view>
		</up-sticky>
		<view class="wrap-list">
			<view class="wrap-list-item" :key="index" v-for="(item,index) in 10">
				<view class="wrap-list-item-info">
					<view class="wrap-list-item-info-t align-center">
						<up-image src="/static/images/agreeBg.png" width="120rpx" height="120rpx" :radius="6"></up-image>
						<view class="wrap-list-item-info-t-r">
							<view class="user-name">
								昵称
							</view>
							<view class="wrap-list-item-info-tips align-center">
								<view class="wrap-list-item-info-tips-item align-justify-center">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									实名
								</view>
								<view class="wrap-list-item-info-tips-item align-justify-center">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									实名
								</view>
								<view class="wrap-list-item-info-tips-item align-justify-center">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									实名
								</view>
								<view class="wrap-list-item-info-tips-item align-justify-center">
									<view class="wrap-list-item-info-tips-item-sure"></view>
									实名
								</view>
							</view>
						</view>
					</view>
					<view class="wrap-list-item-info-b wrap-list-item-info-tips align-center">
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
					</view>
				</view>
				<view class="wrap-list-item-introduce align-justify-center">
					<text>对于自己的介绍对于自己的介绍对于自己的介绍对于自己的介绍对于自己的。</text>
					<view class="xingxing"></view>
				</view>
				<view class="wrap-list-item-atlas align-justify-space-between">
					<up-image src="/static/images/agreeBg.png" width="148rpx" height="148rpx" :radius="6"></up-image>
					<up-image src="/static/images/agreeBg.png" width="148rpx" height="148rpx" :radius="6"></up-image>
					<up-image src="/static/images/agreeBg.png" width="148rpx" height="148rpx" :radius="6"></up-image>
					<up-image src="/static/images/agreeBg.png" width="148rpx" height="148rpx" :radius="6"></up-image>
				</view>
				<view class="wrap-list-item-mark align-justify-center">
					已见面
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useConfigStore,
		useUserStore
	} from '@/store'
	const systemBarInfo = useConfigStore().systemBarInfo
	
	const hanldeBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;

		&-navigation {
			background-color: #ffffff;

			&-content {
				padding: 0 30rpx;
				box-sizing: border-box;

				.back {
					width: 12rpx;
					height: 28rpx;
					background: url("/static/images/back.png") center/cover no-repeat;
				}

				.filter-content {
					margin-left: 40rpx;
					font-size: 30upx;
					color: #222222;
					
					.suffix-content{
						position: relative;
						font-size: 30rpx;
						color: #FF47AB;
						&::before{
							position: absolute;
							top: 0;
							bottom: 0;
							left: -20rpx;
							margin: auto 0;
							width: 2rpx;
							height: 30rpx;
							background-color: #DEDEDE;
							border-radius: 2rpx 2rpx 2rpx 2rpx;
							content: "";
						}
					}

					&-image {
						width: 30rpx;
						height: 30rpx;
						background: url("/static/images/filter.png") center/cover no-repeat;
					}

					text {
						margin-left: 8upx;
					}
				}
			}
		}
		
		&-list{
			margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			&-item{
				position: relative;
				width: 100%;
				margin-bottom: 38rpx;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				
				&-info{
					&-t{
						&-r{
							margin-left: 16rpx;
							.user-name{
								font-weight: 500;
								font-size: 34rpx;
								color: #222222;
							}
						}
					}
					&-tips{
						margin-top: 16rpx;
						&-item{
							width: 82rpx;
							height: 34rpx;
							margin-right: 16rpx;
							background-color: #57EE91;
							font-size: 22rpx;
							color: #ffffff;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							&-sure{
								width: 22rpx;
								height: 22rpx;
								margin-right: 4rpx;
								background: url('/static/images/sure.png') center/cover no-repeat;
							}
						}
					}
					&-b{
						.wrap-list-item-info-tips-item{
							width: auto;
							height: auto;
							padding: 10rpx 14rpx;
							box-sizing: border-box;
							color: #444444;
							font-size: 26rpx;
							background-color: #F3F3F3;
						}
					}
				}
				
				&-introduce{
					position: relative;
					margin-top: 40rpx;
					padding: 40rpx;
					box-sizing: border-box;
					background-color: #F8F6FF;
					.xingxing{
						position: absolute;
						left: 40rpx;
						top: -20rpx;
						width: 56rpx;
						height: 48rpx;
						background: url('/static/images/xingxing.png') center/cover no-repeat;
					}
				}
				
				&-atlas{
					margin-top: 40rpx;
				}
			
				&-mark{
					position: absolute;
					right: 0;
					top: 0;
					width: 106rpx;
					height: 46rpx;
					background: url('/static/images/jianmian-tips.png') center/cover no-repeat;
					font-size: 22rpx;
					color: #6E7AFF;
				}
			}
		}
	}
</style>